<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!--上述2个meta标签必须放在最前面，任何其他内容都必须放在后面-->
    <title>CSS组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
//选项卡导航
<ul class="nav nav-tabs">
    <li><a href="">首页</a></li>
    <li class="active"><a href="">个人信息</a></li>
    <li><a href="">我的博文</a></li>
</ul>
<hr/>
//胶囊式导航
<ul class="nav nav-pills">
    <li><a href="">首页</a></li>
    <li class="active"><a href="">个人信息</a></li>
    <li><a href="">我的博文</a></li>
</ul>
<hr/>
//堆叠式导航
<ul class="nav nav-stacked">
    <li><a href="">首页</a></li>
    <li class="active"><a href="">个人信息</a></li>
    <li><a href="">我的博文</a></li>
</ul>
<hr/>
//自适应导航
<ul class="nav nav-justified">
    <li><a href="">首页</a></li>
    <li class="active"><a href="">个人信息</a></li>
    <li><a href="">我的博文</a></li>
</ul>
<hr/>
//二级导航
<ul class="nav nav-tabs">
    <li><a href="">首页</a></li>
    <li><a href="">个人信息</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="">
            我的博文
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="">技术文章</a></li>
            <li><a href="">成长心得</a></li>
            <li><a href="">我的心情</a></li>
        </ul>
    </li>
    <li><a href="">给我留言</a></li>
    <li><a href="">收藏本站</a></li>
</ul>
<hr/>
<!--导航栏1-->
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <sapn class="sr-only">切换导航</sapn>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Bootstrap</a>
    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">C#</a></li>
            <li><a href="#">PHP</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    Java
                    <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Swing</a></li>
                    <li><a href="#">EJB</a></li>
                    <li><a href="#">SSH</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<hr/>
<!--缩略图-->
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 col-xs-6">
            <div class="thumbnail">
                <img src="img/1.jpg" alt="">
                <div class="caption">
                    <h3>左耳</h3>
                    <P> s</P>
                    <p>
                        <a href="#" class="btn btn-primary " role="button">s</a>
                        <a href="#" class="btn btn-default " role="button">s</a>

                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<hr/>
<!--媒体对象-->
<div class="container">
    <div class="media">
        <div class="media-left">
            <a href="#"><img src="img/1.jpg"
                             class="media-object " alt=""></a>
        </div>
        <div class="media-body">
            <div class="media-heading">
                <h4>青春电影</h4>
                <p>演员</p>
                <small></small>
            </div>
        </div>
    </div>
</div>
</body>
</html>
